import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import dynamic from "next/dynamic";

// We cannot use SSR for our OpenCascade.js viewport,
// therefore we have to load it dynamically without SSR
// https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
const OCJSViewport = dynamic(
  () => import("../src/OCJSViewport"),
  { ssr: false }
);

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://ocjs.org">OpenCascade.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{" "}
          <code className={styles.code}>src/OCJSViewport.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://ocjs.org/reference-docs" className={styles.card}>
            <h2>Reference Documentation &rarr;</h2>
            <p>Find in-depth information about OpenCascade.js features and API.</p>
          </a>

          <a href="https://ocjs.org/docs/getting-started/hello-world" className={styles.card}>
            <h2>Guides &rarr;</h2>
            <p>Get started and learn about some of the more advanced topics on our documentation website!</p>
          </a>

          <a
            href="https://ocjs.org/docs/examples/bottle"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Check out some of the interactive examples on our website.</p>
          </a>

          <a
            href="https://github.com/donalffons/opencascade.js/discussions"
            className={styles.card}
          >
            <h2>Discuss &rarr;</h2>
            <p>
              Get in touch with the community and help us build awesome CAD tools.
            </p>
          </a>
        </div>
        <OCJSViewport />
      </main>

      <footer className={styles.footer}>
        <a
          href="https://ocjs.org/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <span className={styles.logo}>
            <Image src="https://raw.githubusercontent.com/donalffons/opencascade.js/master/images/logo.svg" alt="Ocjs Logo" width={150} height={50} />
          </span>
        </a>
      </footer>
    </div>
  );
}
